<template>
  <div class="header">
    <dv-loading v-if="dvLoading" class="loading-class">操作中...</dv-loading>
    <div class="top_left">
      <!-- <div style="margin-left:28rem;">
        <span style="margin-left:100px;font-size:20px;">--{{roleName}}</span>
      </div> -->
    </div>
    <div class="header-right">
      <div class="header-user-con">
        <div class="user-message" @click="loginout" title="退出登录">
          <img src="../../assets/img/icon_tc.png">
        </div>
        <div class="user-message" title="消息">
          <el-badge :value="3" class="badge-message-class">
            <img src="../../assets/img/icon_xiaoxi.png">
          </el-badge>
        </div>
        <div class="user-avator">
          <img src="../../assets/img/icon_ren.png">
        </div>
        <!-- 用户名下拉菜单 -->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{username}}
            <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="user">修改密码</el-dropdown-item>
            <!-- <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="top_right">
        <img src="../../assets/img/top_right.png">
      </div>
    </div>
    
  </div>
</template>
<script>
import mixin from '@/mixin/mixin.js';
import bus from "../common/bus";
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
import $ from 'jquery'
export default {
  mixins: [mixin],
  data() {
    return {
      roleName:'',
      collapse: false,
      fullscreen: false,
      name: "linxin",
      message: 2,
      dvLoading:false
    };
  },
  computed: {
    username() {
      let username = localStorage.getItem("ms_username");
      return username ? username : this.name;
    },
    ...mapGetters('dailog',{
      isShow:'isShow'
    })
  },
  created(){
    let userinfo = JSON.parse(localStorage.getItem("userinfo"))
    this.roleName = userinfo.roleName; 
  },
  beforeDestroy(){
  },
  methods: {
    loginout(){
      let self = this;
      let userinfo = JSON.parse(localStorage.getItem("userinfo"))
      self.$confirm('请确认是否退出系统?', '退出', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        }).then(() => {
        self.showLoading();
        $.ajax({
            type:"get",                            
            url:`/wgry/index/logout?username=${userinfo.accountName}`,
            timeout:30000,
            async: false,
            cache: false,
            success: function (res) {
                self.hideLoading();
                if(res.code == '20000'){
                    self.$router.push("/login");
                    localStorage.removeItem("ms_username");
                    localStorage.removeItem("token");
                    localStorage.removeItem("userinfo")
                    self.$message.success(res.message)
                }else{
                    self.$message.error(res.message)
                }
            },
            error:function(err){
                self.hideLoading();
                self.$message.error(err)
            }
        })
        }).catch(() => {
            console.log('取消退出！')        
        });
      
    },
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      let self = this;
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));
      if (command == "user") {
        this.$store.dispatch('dailog/showDailog')
      }
    },
    ...mapActions('dailog',[
      'hideDailog',
      'showDailog'
    ]),
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  },
  mounted() {
  }
};
</script>
<style scoped>
.badge-message-class >>> .el-badge__content{
  border-color: #f18a23;
  background-color: #f18a23;
}
.top_left{
  background-image: url(../../assets/img/logo.png);
  width: 1076px;
  height: 70px;
  display: flex;
  align-items: center;
  /* background-size: 100% 100%; */
}
.header {
  background-color:#167fdd;
  /* margin-top: -11px; */
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: #fff;
  
}
.header .logo {
  float: left;
  width: 250px;
  line-height: 70px;
}
.header-right {
  position: absolute;
  right:0px;
  top: 2px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}
.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}
.btn-bell-badge {
  position: absolute;
  right: 0;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}
.btn-bell .el-icon-bell {
  color: #fff;
}
.user-name {
  margin-left: 10px;
}
.user-message{
  margin-left: 20px;
}
.user-message img{
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.user-message img:hover{
  cursor: pointer;
  opacity: 0.8;
}
.user-avator {
  margin-left: 20px;
}
.user-avator img {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.top_right img {
  width: 100px;
  height: 60px;
}
.el-dropdown-link {
  color: #fff;
  cursor: pointer;
}
.el-dropdown-menu__item {
  text-align: center;
}
.loading-class{
    background:rgba(0, 0, 0, 0.8);
    color:#009688;
    width:100%;
    height:100vh;
    z-index:100;
    position:absolute;
    left:0px;
    top:1px;
}
</style>
